<template>
  <div class="publish">
    <div>
      <el-tabs type="border-card">
        <el-tab-pane label="公告标讯">
          <!-- 下拉框 -->
          <div style="margin: 20px 0">
            <el-select
              v-model="value"
              multiple
              placeholder="公告类型"
              style="width: 220px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="value"
              multiple
              placeholder="所属行业"
              style="width: 220px; margin: 0 10px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="value"
              multiple
              placeholder="收藏日期"
              style="width: 220px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-button class="ml10 btn">查询</el-button>
          </div>
          <!-- 表格 -->
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            @selection-change="handleSelectionChange"
            border
            :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
            stripe
            style="width: 100%"
          >
            <el-table-column type="selection" width="40" />
            <el-table-column label="公告类型" width="200" align="center">
              <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
              property="name"
              label="标题信息"
              align="center"
              width="700"
            />

            <el-table-column property="date" label="收藏日期" align="center">
            </el-table-column>

            <el-table-column property="date" label="所属行业" align="center">
            </el-table-column>

            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" align="center">
              <template #default>
                <el-button link type="primary" @click="handleClick"
                  >取消收藏</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="企业公司">
          123
          <!-- 下拉框 -->
          <div style="margin: 20px 0">
            <el-select
              v-model="value"
              multiple
              placeholder="公告类型"
              style="width: 220px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="value"
              multiple
              placeholder="所属行业"
              style="width: 220px; margin: 0 10px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="value"
              multiple
              placeholder="收藏日期"
              style="width: 220px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-button class="ml10 btn">查询</el-button>
          </div>
          <!-- 表格 -->
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            @selection-change="handleSelectionChange"
            border
            :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
            stripe
            style="width: 100%"
          >
            <el-table-column type="selection" width="40" />
            <el-table-column label="公告类型" width="200" align="center">
              <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
              property="name"
              label="标题信息"
              align="center"
              width="700"
            />

            <el-table-column property="date" label="收藏日期" align="center">
            </el-table-column>

            <el-table-column property="date" label="所属行业" align="center">
            </el-table-column>

            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" align="center">
              <template #default>
                <el-button link type="primary" @click="handleClick"
                  >取消收藏</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElTable } from "element-plus";
import "../../../../../assets/com/com.scss";
// 下拉
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },

  {
    value: "Option2",
    label: "Option2",
  },
];

interface User {
  date: string;
  name: string;
  address: string;
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const tableData: User[] = [
  {
    date: "招标公告",
    name: "测试-CG2024011800012024年1月18日招标公告",
    address: "1",
  },

  {
    date: "招标公告",
    name: "测试-CG2024011800012024年1月18日招标公告",
    address: "1",
  },
];

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const handleClick = () => {
  console.log("click");
};
</script>

<style lang="scss" scoped>
:deep(.el-tabs--border-card > .el-tabs__header) {
  background-color: #fff;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  color: #000;
}

:deep(.el-tabs__nav) {
  border-top: 2px solid #fff;
}

:deep(
    [data-v-b30d4aeb]
      .el-tabs--border-card
      > .el-tabs__header
      .el-tabs__item.is-active
  ) {
  border-top: 3px solid #f43107;
}

.publish {
  height: 940px;
  padding: 20px;
  background-color: #fff;
}

// 下拉
:deep(.el-select__wrapper) {
  height: 36px;
}

.btn {
  width: 90px;
  height: 36px;
  background: #f43107;
  border-radius: 4px;
  border: 0;
  color: #fff;
}
</style>
